import {XgPlayer} from "../index";

export class XgControlPlay {
  root!: HTMLElement;
  constructor(private player: XgPlayer) {
    this.init();
  }
  private init() {
    this.root = document.createElement('div');
    this.root.className = 'control-icon-wrap play-wrap';
    this.root.innerHTML = `<svg class="icon icon-control-player" aria-hidden="true">
                              <use xlink:href="#icon-play"></use>
                            </svg>`;
    this.root.addEventListener('click', () => {
      this.player.emitter.emit('togglePlay');
    });
    this.player.emitter.on('playingChange', this.handlePlayStatusChange.bind(this));
  }
  private handlePlayStatusChange(playing: boolean) {
    const iconSvg = this.root.getElementsByTagName('use')[0];
    if (iconSvg) {
      const type = playing ? 'pause' : 'play';
      iconSvg.setAttribute('xlink:href', '#icon-' + type);
    }
  }
}
